<template>
	<article class="kp-accountLink">
		<div class="kp-al-box">
			<div class="kp-ab-phone">
				<p>您已安全绑定当前手机号</p>
				<span>{{phone}}</span>
			</div>
			<div class="kp-mb-li" v-for="(item,index) in buildinfo">
				<span v-if="item.bdType=='weixin'">微信</span>
				<span v-else-if="item.bdType=='weibo'">微博</span>
				<span v-else="item.bdType=='qq'">QQ</span>
				<input type="text" disabled="disabled">
				<p>
					<button class="wbd" v-if="item.isBundling==0">绑定</button>
					<button class="ybd" v-else>已绑定</button>
				</p>
			</div>
			
		</div>
	</article>
</template>

<script>
	import {
		mapGetters
	} from "vuex";
	export default {
		data() {
			return {
				disabledValue: '',
				pageHeight: '',
				phone: '', //手机号
				qvalue: '小小张',
				buildinfo:[],
			}
		},
		mounted() { //载入后执行
			var h = document.documentElement.clientHeight || document.body.clientHeight;
			this.pageHeight = h;
			if (this.userinfo.phone) {
				this.phone = this.userinfo.phone.replace(/^(\d{3})\d{4}(\d+)/, "$1****$2");
			}
			this.BundlingInfo();
		},
		created() { //创建后

		},
		watch: { //监听放置
		},
		methods: { //方法放置
			BundlingInfo(){
				let param = {
					phone: this.userinfo.phone,
				};
				let that = this;
				this.$http.post(
					this.$baseUrl.baseurl + 'KPCX/appPersonalCenter/userBundlingInfo',
					param
				).then(function(res) {
					console.log(res);
					if(res.data.Code){
						var buildinfo = res.data.Result.bundlingInfo;
						that.buildinfo = buildinfo;
					}else{
						that.$toast(res.data.msg);
					}

				}).catch(error => {

				});
			}
		},
		components: {

		},
		computed: mapGetters([
			'userinfo',
		]),
	}
</script>

<style scoped>
/* //手机号部分 */
.kp-accountLink{
	background: #f4f5f9;
	height: 100vh;
}
.kp-al-box{
	padding-top: 86px;
}
.kp-ab-phone p{
	font-size: 28px;
	color: rgb(51,51,51);
	padding-top: 103px;
	text-align: center;
}
.kp-ab-phone span{
	font-size: 60px;
	color: rgb(51,51,51);
	text-align: center;
	display: block;
	padding-top: 28px;
	padding-bottom: 105px;
}


.kp-mb-li{
	height: 128px;
	display: flex;
	padding: 0 30px;
	background: #fff;
	margin-bottom: 2px;
}
.kp-mb-li input{
	flex: 1;
	border: none;
	font-size: 32px;
	color: #cbcbcb;
	background: #FFF;
	outline: none;
	margin-right: 30px;
}
.kp-mb-li span{
	padding-right:38px;
	display: inline-block;
	font-size: 34px;
	color: rgb(51,51,51);
	line-height: 128px;
}
.kp-mb-li p{
	flex: 1;
}
.kp-mb-li button.ybd{
	height: 60px;
	width: 126px;
	font-size: 30px;
	background: #fff;
	color: rgb(204,204,204);
	margin-top: 37px;
	float: right;
	border: none;
	border-radius: 6px;
	outline: none;
}
.kp-mb-li button.wbd{
	height: 60px;
	width: 126px;
	font-size: 30px;
	background: #fff;
	color: rgb(59,195,194);
	margin-top: 37px;
	float: right;
	border: 2px solid rgb(59,195,194);
	border-radius: 6px;
	outline: none;
}	
</style>
